<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>yooking表单</title>
        <!-- 引入 WeUI CDN 链接 -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
    </head>
    <body>
		<div class="page">
			<div class="weui-form">
				<div class="weui-form__text-area">
					<h2 class="weui-form__title">南安二幼幼儿登记信息</h2>
						<div class="weui-form__desc">请如实填写信息(本信息仅个人和发布人员可查看)</div>
				</div>
				<div class="weui-form__control-area">
					<div class="weui-cells__group weui-cells__group_form">
						<div class="weui-cells__title">大四班</div>
						<div class="weui-cells weui-cells_form">
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">学籍号</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生学籍号"  type="number" pattern="[0-9]*"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生姓名"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生身份证号码"  type="number" pattern="[0-9]*"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">住址</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写家庭住址" />
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">父亲姓名</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生父亲姓名" />
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">父亲身份证号码</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生父亲身份证号码"  type="number" pattern="[0-9]*"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">父亲联系电话</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生父亲联系电话"  type="number" pattern="[0-9]*"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">母亲姓名</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生母亲姓名" />
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">母亲身份证号码</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生母亲身份证号码"  type="number" pattern="[0-9]*"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active">
								<div class="weui-cell__hd"><label class="weui-label">母亲联系电话</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请填写学生母亲联系电话"  type="number" pattern="[0-9]*"/>
								</div>
							</div>
							<div class="weui-cell weui-cell_active" id="showDatePicker">
								<div class="weui-cell__hd"><label class="weui-label">入园日期</label></div>
								<div class="weui-cell__bd">
									<input id="js_input" class="weui-input" placeholder="请选择入园日期" readonly/>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="weui-form__tips-area">
					<p class="weui-form__tips">
						点击[确定]按钮提交数据
					</p>
				</div>
				<div class="weui-form__opr-area">
					<a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
				</div>
				<div class="weui-form__tips-area">
					<p class="weui-form__tips">
						提交完成后，可点击[查看结果]按钮去查看提交内容（如果内容有误，请重新修改后提交）
					</p>
				</div>
				<div class="weui-form__extra-area">
					<div class="weui-footer">
						<p class="weui-footer__links">
							<a href="https://www.baidu.com" class="weui-footer__link">查看结果</a>
						</p>
						<p class="weui-footer__text">Copyright © 2020-2020 blog.yookingh.cn</p>
					</div>
				</div>
			</div>
			<div id="js_toast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<i class="weui-icon-success-no-circle weui-icon_toast"></i>
					<p class="weui-toast__content">已完成</p>
				</div>
			</div>
		</div>
    </body>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $toast = $('#js_toast');
			var $input = $('#js_input');
			$input.on('input', function(){
				if ($input.val()){
					$('#showTooltips').removeClass('weui-btn_disabled');
				}else{
					$('#showTooltips').addClass('weui-btn_disabled');
				}
			});
			$('#showTooltips').on('click', function(){
				if ($(this).hasClass('weui-btn_disabled')) return;
				// toptips的fixed, 如果有`animation`, `position: fixed`不生效
				$('.page.cell').removeClass('slideIn');
				$toast.fadeIn(100);
				setTimeout(function () {
					$toast.fadeOut(100);
				}, 2000);
			});
		});
		
		$('#showDatePicker').on('click', function () {
			weui.datePicker({
				start: 2020,
				end: new Date().getFullYear(),
				onChange: function (result) {
					console.log(result);
				},
				onConfirm: function (result) {
					console.log(result);
				},
				title: '多列选择器'
			});
		});
	</script>
</html>
